<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>参与投票</title>
    <style>
        hr {
            margin: 20px;
        }
    </style>
    <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<hr>
<a href="/">主页</a>
<a href="/logout">注销登录</a>
<hr>
<h2 th:text="'标题:'+${data.voteTitle}"></h2>
<h2 th:text="'开始时间：'+${#dates.format(data.startTime,'yyyy-MM-dd HH:mm:ss')}"></h2>
<h2 th:text="'截止时间：'+${#dates.format(data.endTime,'yyyy-MM-dd HH:mm:ss')}"></h2>
<form>
    <hr>
    <h3 th:text="${data.voteContent}"></h3>
    <input type="number" name="voteId" th:value="${data.voteId}" hidden>
    <div th:each="option : ${data.options}">
        <input type="radio" name="optionId" th:value="${option.optionId}" th:text="${option.optionName}" required>
    </div>
    <span style="color: red" th:if="${choose}!=null" th:text="${choose}"></span>
    <hr>
</form>
<div id="container" style="min-width:400px;height:400px"></div>
<hr>
<h2>留言</h2>
<div th:each="m : ${data.message}">
    <span th:text="${#dates.format(m.createTime,'yyyy-MM-dd HH:mm:ss')}+'  '"></span>
    <span th:text="${m.userName}+': '"></span>
    <span th:text="${m.message}"></span>
    <a th:href="@{/deleteMessage/{messageId}(messageId=${m.messageId})}">删除</a>
</div>
<form action="/message" method="post">
    <input type="number" name="voteId" th:value="${data.voteId}" hidden>
    <textarea name="content" placeholder="请输入留言内容" required></textarea>
    <input type="submit" value="我也要留言">
</form>
<hr><hr>
<h1><a th:href="@{/deleteVote/{voteId}(voteId=${data.voteId})}">删除投票</a></h1>
<script th:inline="javascript">
    const data = [[${data.options}]]
    let dataFormat = []
    for (let i = 0; i < data.length; i++) {
        dataFormat.push(
            {
                name: data[i].optionName,
                data: [data[i].optionCount]
            }
        )
    }
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '投票统计'
            },
            xAxis: {
                categories: ['票数']
            },
            credits: {
                enabled: true
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true,
                        inside: true
                    }
                }
            },
            series: dataFormat
        });
    });

</script>
</body>
</html>